<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="geral" />
<style>
.borda {
	border: 1px solid #0000FF !important;
}
</style>
<script type="text/javascript">
	function marcarPintar(link, tipo) {
		$('#tipo').val(tipo);
		jQuery.each($('.thumbnail'), function(i, val) {
			$(val).removeClass('borda');
		});

		$(link).addClass('borda');
	}
</script>
	
</head>
<body>
	<g:hasErrors bean="${marcador}">
		<g:eachError var="err" bean="${marcador}">
			<div class="alert alert-danger alert-dismissable">
				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
				<g:message error="${err}" />
			</div>
		</g:eachError>
	</g:hasErrors>
	<div class="row">
  		<div class="col-md-6 col-md-offset-3">
  			<h3>Atualizar Marcador</h3>
  			<g:form controller="marcador" action="alterar" role="form">
				<g:render template="campos" model="[marcador:marcador]"/>
				<g:hiddenField name="id" value="${marcador.id}"/>
				<g:submitButton name="atualizar" class="btn btn-primary" value="Atualizar Marcador" />
				<a class="btn btn-default" href="${createLink(controller:'index', action:'index')}" role="button">Cancelar</a>
			</g:form>
  		</div>
	</div>
	
	<script type="text/javascript">

		link = $('#agua');
		if ($('#tipo').val() == 1) {
			link = $('#agua');
		} else if ($('#tipo').val() == 2) {
			link = $('#falta');
		} else {
			link = $('#desperdicio');
		}

		marcarPintar(link, $('#tipo').val());
	</script>
</body>

</html>
